<template>
    <div draggable="true">
        <div class="title" :style="flag">
            <fold_title :title_value="title_value" :icon="icon ? icon:'▪'  " :group="''"
                        @click.native="collo_child"></fold_title>
        </div>
        <div class="child_fold" ref='child' :style="child_show">
            <slot name='body'></slot>
        </div>
    </div>
</template>

<script>
    import fold_child from "../atom/flod_child.vue"
    import fold_title from "../atom/flod_title.vue"

    export default {
        name: "fold",
        data() {
            return {
                child_show: {
                    "height": "0px"
                },
                flag: {
                    "color": "#C6B7C6 !important"
                }
            }
        },
        components: {
            fold_child,
            fold_title
        },
        methods: {
            collo_child() {
                let h = this.child_show.height;
                if (this.$refs.child.children[0] === undefined) return
                let child = this.$refs.child.children[0].children;
                let count = 0;
                for (let i of child) {
                    count += i.childElementCount;
                }
                this.child_show.height = h == "0px" ? count * 40 + "px" : "0px"
                if (this.child_show.height != "0px") {
                    this.flag = {
                        "color": `#F9E01F !important`
                    }
                } else {
                    this.flag = {
                        "color": "#C6B7C6 !important"
                    }
                }
            }
        },
        props: {
            title_value: String,
            icon: String,
        }
    }
</script>

<style scoped lang="less">

    .draggable-item {
        /* 设置样式 */
        cursor: move;
    }

    .child_fold {
        transition: .5s;
        overflow-y: scroll;
        overflow-x: hidden;

        &::-webkit-scrollbar {
            background-color: #3F0E40;
            width: 5px;
        }

        &::-webkit-scrollbar-button {
            /*background-color: #4D2A51;*/
        }

        &::-webkit-scrollbar-thumb {
            background-color: #1164A3;
        }

        & > * {
            width: 80%;
            margin-left: 10px;
            /*padding-left: 10px;*/
            height: 20px;
        }
    }
</style>